<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>粤教云统一认证授权-注册</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div style="border:0;background-color: rgba(255, 255, 255, 0.4);border-radius: 0.8rem;padding: 1rem;box-shadow:0 2px 12px 0 rgb(168, 167, 167);">
                <div style="text-align: center;">
                    <img class="img-fluid" src="http://www.gjs.cn/Template/Skin/GD/peSkin/images/logo.png" />
                </div>
                <div style="text-align: center;">
                    <form class="form-signin" method="post" th:action="@{/register}">
                        <h4 class="form-signin-heading" style="text-align: center;">
                            <p>粤教云统一认证授权平台</p>
                        </h4>
                        <h5>
                            <p>用户注册</p>
                        </h5>
                        <p>
                            <label for="userAccount" class="sr-only">UserAccount</label>
                            <input type="text" id="userAccount" name="userAccount" class="form-control" placeholder="账号"
                                   required="" autofocus="">
                        </p>
                        <p>
                            <label for="mobile" class="sr-only">Mobile</label>
                            <input type="text" id="mobile" name="mobile" class="form-control" placeholder="手机号"
                                   required="" autofocus="">
                        </p>
                        <p>
                            <label for="smsVerificationCode" class="sr-only">验证码</label>
                        <div class="input-group">
                            <input type="text" id="smsVerificationCode" name="smsVerificationCode" class="form-control" placeholder="验证码"
                                   required="" autofocus="">
                            <span class="input-group-btn">
                        <button id="sendVerificationCode" class="btn btn-lg btn-primary" style="background-color: #e62129;border: 0;font-size: 1rem;">获取验证码</button>
                    </span>
                        </div>
                        </p>
                        <p>
                            <label for="password" class="sr-only">Password</label>
                            <input type="password" id="password" name="password" class="form-control" placeholder="密码"
                                   required="">
                        </p>
                        <p>
                            <label for="nickname" class="sr-only">Nickname</label>
                            <input type="text" id="nickname" name="nickname" class="form-control" placeholder="昵称"
                                   required="" autofocus="">
                        </p>
                        <p>
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input" required
                                       style="width: 1rem;height: 1rem;" value="">同意<a href="#" target="_blank" onclick="toAgreement('UserRegisterAgreement')">《粤教云用户注册协议》</a>
                            </label>
                        </p>
                        <button class="btn btn-lg btn-primary btn-block" style="background-color: #e62129;border: 0;"
                                type="submit">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var timer = null;
    var timeCount = 0;
    var sendVerificationCode = $("#sendVerificationCode")
    sendVerificationCode.click(function () {
        var mobile = $("#mobile").val();
        if (!mobile) {
            alert("无效手机号")
            return
        }

        // 点击发送按钮后要马上禁用按钮防止重放
        sendVerificationCode.attr("disabled", "true");
        $.get("[[@{/send_register_valid_code}]]?mobile=" + mobile, function (res) {
            if (res.code && res.code === 1) {
                // 成功
                timeCount = 60
                timer = setInterval(function () {
                    timeCount--;
                    if (timeCount === 0) {
                        sendVerificationCode.text("获取验证码")
                        sendVerificationCode.removeAttr("disabled");
                        clearInterval(timer)
                        return
                    }
                    sendVerificationCode.text(timeCount + "秒")
                    sendVerificationCode.attr("disabled", "true");
                }, 1000);
            } else {
                sendVerificationCode.removeAttr("disabled");
                // 失败
                alert('发送验证码失败：' + (res.msg || '未知原因'))
            }
        });
    });

    function toAgreement(agreementConfigKey){
        window.location.href = 'http://www.baidu.com'+"?key="+agreementConfigKey
    }
</script>
<style>
    /* stylelint-disable selector-no-qualifying-type, property-no-vendor-prefix */

    body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #eee;
    }

    .form-signin {
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
    }
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
        margin-bottom: 10px;
    }
    .form-signin .checkbox {
        font-weight: 400;
    }
    .form-signin .form-control {
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }
    .form-signin .form-control:focus {
        z-index: 2;
    }
    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
</style>
</html>